<template>
  <dialog-box
    :isDialog="false"
    ref="myDialog"
    :showFooter="true"
    width="600px"
    @close="close"
    @sureHandle="sureHandle"
    :isFooterSlot="true"
    title="计算"
  >
    <template v-slot:dialogMain>
      <div class="main-box">
        <div class="main-left">
          <el-button type="primary" @click="addGroup">新增</el-button>
          <ul>
            <li v-for="(it,i) in state.groupList" :key="i" @click="clickNode(it)">
              <span>{{ it.name }}</span>
              <el-icon :size="16" @click.stop="delGroup(i)"><Delete /></el-icon>
            </li>
          </ul>
        </div>
        <div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            size="default"
            status-icon
          >
            <el-form-item label="字段名称">
              <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="字段表达">
              <div>
                <div class="mb-10">
                  <el-select v-model="ruleForm.field1">
                    <el-option
                      v-for="(it, i) in state.fieldList"
                      :key="i"
                      :label="it.label"
                      :value="it.value"
                    />
                  </el-select>
                </div>
                <div class="mb-10">
                  <el-select v-model="ruleForm.count">
                    <el-option
                      v-for="(it, i) in state.countTypes"
                      :key="i"
                      :label="it.label"
                      :value="it.value"
                    />
                  </el-select>
                </div>
                <div class="mb-10">
                  <el-select v-model="ruleForm.field2">
                    <el-option
                      v-for="(it, i) in state.fieldList"
                      :key="i"
                      :label="it.label"
                      :value="it.value"
                    />
                  </el-select>
                </div>
                <div class="mb-10">等于</div>
                <div>
                  <el-input v-model="ruleForm.newField" />
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </dialog-box>
</template>

<script setup lang="ts">
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import {
  type ComponentSize,
  type FormInstance,
  type FormRules,
  ElMessage,
} from "element-plus";
import { Delete } from "@element-plus/icons-vue";
const myDialog = ref(null);

const ruleFormRef = ref<FormInstance>();

const emit = defineEmits(["sureHandle"]);

const ruleForm = ref({
  name: "",
  field1: "",
  count: "",
  field2: "",
  newField: "",
});

let state = reactive({
  fieldList: [
    { label: "字段值1", value: 1 },
    { label: "字段值2", value: 2 },
    { label: "字段值3", value: 3 },
  ],
  countTypes: [
    {
      value: "1",
      label: "加",
    },
    {
      value: "2",
      label: "减",
    },
    {
      value: "3",
      label: "乘",
    },
    {
      value: "4",
      label: "除",
    },
  ],
  groupList: [
    {
      name: '字段1+2',
      field1: "",
      count: "",
      field2: "",
      newField: "",
    }
  ],
});
const addGroup = () => {
  resetForm();
};
const clickNode = (data) => {
  ruleForm.value = Object.assign({}, { ...data });
};
const delGroup = (i) => {
  state.groupList.splice(i, 1);
};

// 定义完成后，用defineExpose()暴露给父组件
const open = (data: any) => {
  resetForm();
  if (data) {
    console.log(data, "111");
    ruleForm.value = Object.assign({}, { ...data });
  }
  myDialog.value.handleOpen();
};
const close = () => {
  myDialog.value.handleClose();
};
const sureHandle = () => {
  submitForm();
};
defineExpose({
  open,
  close,
});

const submitForm = async () => {
  if (!ruleFormRef) return;
  await ruleFormRef.value?.validate((valid, fields) => {
    if (valid) {
      console.log(Object.assign({}, { ...ruleForm.value }), "submit!");
      // console.log(toRefs(ruleForm), "submit!");
      ElMessage({
        type: "success",
        message: "新增成功!",
      });
      emit("sureHandle", Object.assign({}, { ...ruleForm.value }));
      close();
    }
  });
};

const resetForm = () => {
  if (!ruleFormRef) return;
  // state.groupList = [];
  ruleForm.value = {
    name: "",
    field1: "",
    count: "",
    field2: "",
    newField: "",
  };
  ruleFormRef.value?.resetFields();
};
const rules = reactive<FormRules<RuleForm>>({
  // name: [{ required: true, message: "请选择字段", trigger: "blur" }],
});
</script>

<style lang="scss" scoped>
.mb-10 {
  margin-bottom: 10px;
}
.main-box {
  width: 100%;
  display: flex;
  .main-left {
    width: 100px;
    margin-right: 30px;
    font-size: 16px;
    ul {
      margin-top: 10px;
    }
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #000;
      margin-bottom: 10px;
    }
  }
}
.group-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
</style>
